<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试报告</title>
    <!--	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <!--	<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <link rel="stylesheet" href="static/element.css">
    <script src="static/vue.js"></script>
    <script src="static/element.js"></script>
    <script src="static/echarts.js"></script>
    <link rel="shortcut icon" href="static/favicon.ico">
</head>
<body>
<div id="app">
    <div class="homeWrap">
        <el-container>
            <el-header>
                <div class="grid-content">
                    <b>测试报告</b>
                </div>
            </el-header>
            <el-container>
                <el-aside width="50%" class="col-content bg-grey flex">
                    <el-row>
                        <el-col>
                            用例总数：{{summary.total}}
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            通过用例数：{{summary.pass}}
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            失败用例数：{{summary.fail}}
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            开始执行时间：{{summary.start_exec_time}}
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            执行结束时间：{{summary.end_exec_time}}
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            总耗时(秒)：{{summary.elapsed_time}}
                        </el-col>
                    </el-row>
                </el-aside>
                <el-main>
                    <div id="pie" style="width: 300px;height: 300px;margin: auto;">
                    </div>
                </el-main>
            </el-container>
            <el-footer style="padding-top: 20px;">
                <el-table :data="overview"
                          border
                          :default-sort="{prop: 'case_id', order:'aescending'}"
                          style="border-radius: 6px; color: black"
                >
                    <el-table-column prop="case_id" label="ID" sortable></el-table-column>
                    <el-table-column
                            prop="status" label="状态"
                            :filters="[{text: '通过', value: 'PASS'},{text: '失败', value: 'FAIL'}]"
                            :filter-method="filterTag"
                            filter-placement="bottom-end"
                    >
                        <template slot-scope="{row: {status}}">
                            <div v-if="status === 'PASS'">
                                <i class="el-icon-success" style="font-size: 30px; color: #67c23a"></i>
                            </div>
                            <div v-else>
                                <i class="el-icon-circle-close" style="font-size: 30px; color: #bd5151"></i>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="desc" label="描述"></el-table-column>
                    <el-table-column prop="case_id" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" round size="small" @click="toDetail(scope.row.case_id)">
                            查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-footer>
        </el-container>
    </div>
</div>
</body>
<script>
    new Vue(
        {
            el: '#app',
            data: function () {
                return {
                    summary: {{!summary!}},
                    overview: {{!overview!}}
            }
            },
            methods: {
                 filterTag(value, row) {
                    return row.status === value;
                },
                toDetail(case_id) {
                    window.open(case_id + ".html")
                },
                tableRowClassName({row, rowIndex}) {
                    if (row.status === "PASS") {
                      return 'success-row';
                    } else if (row.status === "FAIL") {
                      return 'fail-row';
                    }
                    return '';
                  }
            }
        },
    )

    let Mychart = echarts.init(document.getElementById("pie"))
    let option = {
        series: [
            {
                type: 'pie',
                name: '用例执行结果统计',
                data: [
                    {
                        value: {{!summary.pass!}},
                        name: '通过',
                        itemStyle: {color: '#91cd77'}
                    },
                    {
                        value: {{!summary.fail!}},
                        name: '失败',
                        itemStyle: {color: '#ef6567'}
                    }
                ],
                radius: '70%'
            }
        ]
    };
    Mychart.setOption(option)
</script>
<style>
    .bg-grey {
        background: #cbccce;
        padding-left: 20px;
        padding-bottom: 20px;
        padding-top: 48px;
    }

    .flex{
        display: flex;
        flex-direction: column;
    }

    .grid-content {
        border-radius: 6px;
        /*min-height: 36px;*/
        text-align: center;
        line-height: 50px;
        font-size: 24px;
        color: #1e9655;
    }

    .col-content {
        border-radius: 6px;
        text-align: left;
        line-height: 40px;
    }

    .el-table .fail-row {
        background: #b44242;
    }

    .el-table .success-row {
        background: #1e9655;
    }

    .el-table tbody tr:hover>td {
        background-color: unset!important;
    }
</style>
</html>